<template>
	<view>
		<view class="realname_box">
			<view class="realname">
				<u-upload :fileList="positive" @afterRead="_positive" @delete="delete_positive" name="1"
					imageMode="aspectFit" :maxCount="1" width="320" height="240">
					<image src="@/static/sfz_z.png" mode="aspectFit"></image>
				</u-upload>
			</view>
			<view class="realname">
				<u-upload :fileList="reverse" @afterRead="_reverse" @delete="delete_reverse" name="2"
					imageMode="aspectFit" :maxCount="1" width="320" height="240">
					<image src="@/static/sfz_f.jpg" mode="aspectFit"></image>
				</u-upload>
			</view>
			<view class="names">
				<u--input type="text" placeholder="请输入姓名" clearable v-model="name"></u--input>
				<text v-if="name != ''" class="red-msg">请仔细核对姓名，提交后无法修改</text>
			</view>
			<view class="names">
				<u--input type="text" placeholder="请输入身份证号" clearable v-model="idcard"></u--input>
				<text v-if="idcard != ''" class="red-msg">请仔细核对身份证号，提交后无法修改</text>
			</view>
			<text class="order" @click="_upload">提交</text>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				positive: [],
				positive_file:'',
				reverse: [],
				reverse_file:'',
				nmb: 0,
				name: '',
				idcard: '',
				idcardData: {},
				merinfo: {},
				subState: true
			}
		},
		onLoad() {
			this.merinfo = uni.getStorageSync('merinfo');
		},
		methods: {
			// 图片上传
			async uploadFile(index, base) {
				uni.showLoading({
					title: '上传中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'common/uploadFile',
					data: {
						file: base
					},
					header: {
						'token': this.merinfo.token
					},
				});
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: 'none'
				});
				if (res.code==1) {
					if (index == 1) {
						this.positive_file = res.data.url
						this.verifyIdcard(res.data.url)
					}else if(index == 2){
						this.reverse_file = res.data.url
					}
				}
			},
			//人像
			//添加
			_positive(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(1, base64)
						_this.positive = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			//删除
			delete_positive(e) {
				this.positive = []
				this.nmb--
			},
			//国徽
			_reverse(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(2, base64)
						_this.reverse = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			delete_reverse(e) {
				this.reverse = []
				this.nmb--
			},
			//接口
			async _upload() {
				var that = this
				if (this.positive_file != '' && this.reverse_file != '') {
					if (this.name == '') {
						uni.showToast({
							title: '请填写姓名',
							duration: 2000,
							icon: 'none'
						});
						return false
					}
					if (this.idcard == '') {
						uni.showToast({
							title: '请输入身份证号',
							duration: 2000,
							icon: 'none'
						});
						return false
					}
					uni.showModal({
						title: '提示',
						content: '确定已核对实名信息，是否提交？',
						success: function(res) {
							if (res.confirm) {
								that.submits()
							}
						}
					});
				} else {
					uni.showToast({
						title: '请上传照片',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 提交信息
			async submits() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/saveIdCard',
					data: {
						front: this.positive_file,
						back: this.reverse_file,
						name: this.name,
						idcard: this.idcard
					},
					header: {
						'token': this.merinfo.token
					}
				});
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 1) {
					this.merinfo.is_verify = 1
					uni.setStorageSync('merinfo', this.merinfo);
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/merchant/index'
						})
					}, 1500)
				}
			},
			// 获取身份证信息
			async verifyIdcard(url) {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Aliyuns/index',
					data: {
						url: url
					},
					header: {
						'token': this.merinfo.token
					}
				});
				if (res.code == 1) {
					this.idcardData = res.data
					this.name = res.data.name
					this.idcard = res.data.idNumber
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.realname_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 40rpx;

		.realname {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			text-align: center;
			image {
				margin: 0;
			}
		}
		
		.names {
			padding: 20rpx 0;
			width: 100%;
			.red-msg {
				font-size: 24rpx;
				color: #fa3534;
			}
		}

		.order {
			background-color: #2979ff;
			width: 90%;
			margin: 50rpx auto;
			text-align: center;
			padding: 30rpx 0;
			border-radius: 10rpx;
			color: #fff;
			transition: all 0.5s;
		}

		.order:active {
			background-color: #75c3c5;
		}
	}
	.u-upload__wrap__preview__image {
		width: 100% !important;
		height: 480rpx;
	}
</style>
